﻿import QtQuick
import QtQuick.Controls

SplitView {
    id: control

    // property
    // 控制中间点的颜色
    property color handleColor:            Qt.rgba(138/255,138/255,138/255,1)
    property color backgroundColor:        "#f3f3f3"
    property color backgroundHoveredColor: "#ebebeb"
    property color backgroundPressedColor: "#e5e5e5"
    property real  longSide:               26 // 内长边距离
    property real  shortSide:              4  // 内短边距离
    property real  insideRadius:           2  // 内圆角弧度
    property real  outsideRadius:          0  // 外圆角弧度
    property real  thickness:              12 // 中心点厚度
    property bool  spliterVisible:         true // 是否显示间距内容
    // private
    QtObject {
        id: d
        property bool isVertical: control.orientation === Qt.Vertical
    }

    // 间距样式
    handle: Rectangle {
        // 根据垂直或水平分裂器决定宽高
        implicitWidth:  d.isVertical ? control.width : thickness
        implicitHeight: d.isVertical ? thickness     : control.height
        clip: true
        radius: outsideRadius
        visible: spliterVisible
        // 间距背景色
        color: {
            if (SplitHandle.pressed) {
                return backgroundPressedColor
            }
            return SplitHandle.hovered ? backgroundHoveredColor : backgroundColor
        }
        // 间距中心点
        Rectangle {
            // 根据垂直或水平分裂器决定宽高
            width:  d.isVertical ? longSide   : shortSide
            height: d.isVertical ? shortSide  : longSide
            anchors.centerIn: parent
            color: handleColor
            radius: insideRadius
        }
    }

    // Item {
    //     clip: true
    //     implicitWidth: 200
    //     implicitHeight: 200
    //     SplitView.minimumHeight: 50
    //     SplitView.minimumWidth: 50
    //     Text {
    //         text: qsTr("Page 1")
    //         anchors.centerIn: parent
    //     }
    // }
    // Item {
    //     clip: true
    //     id: centerItem
    //     SplitView.minimumWidth: 50
    //     SplitView.minimumHeight: 50
    //     SplitView.fillWidth: true
    //     SplitView.fillHeight: true
    //     Text {
    //         text: qsTr("Page 2")
    //         anchors.centerIn: parent
    //     }
    // }
}
